<template>
        <!-- <button @click="flag=!flag">点击切换</button> -->
    <div>
        <!-- <transition>
            <img ref="target" v-show="flag">
        </transition> -->
          <!-- <transition name="test">
            <img ref="target" v-show="flag">
        </transition> -->
        <son v-model="money" v-model:house="house" />
    </div>
  
</template>

<script setup lang="ts">

import {useIntersectionObserver} from '@vueuse/core'
import {ref}from 'vue'
import Son from './son.vue';
const money=ref(100)
const house=ref('汤臣一品')

// const target=ref<HTMLImageElement|null>(null)
// useIntersectionObserver(target,([{isIntersecting}])=>{
//     if(isIntersecting){
//         target.value!.src="https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/popular_3.jpg"
//     }
// })
// const flag=ref(true)
</script>

<style scoped lang="less">
// div{
//     height: 5000px;
// }
// .test-enter-from{
// opacity: 0;
// }
// .test-enter-active{
//   animation: yz reverse; 
// }
// .test-enter-to{
//     opacity: 1
// }

@keyframes yz{
0%{
transform: scale(1);
}
25%{
transform: scale(2);
}
50%{
transform: scale(3);
}
100%{
transform: scale(1);
}
}
.v-leave-active{
  animation: yz 3s;
}
// .v-leave-from{
// opacity: 0;
// }
// .v-leave-active{
//    transition: all 3s;
// }
// .v-leave-to{
//     opacity: 1
// }
</style>